front-end ロードマップ
HTML
最低ライン
タグの要素をある程度理解し、使いこなせるようにする
メタデータ系+スクリプト
html, head, body, link, meta, style, title, script
セクショニング
header, footer, main, nav, article, section, aside, h1~6
なぜ div ではなくこれらを使う必要があるのか知る
テキストコンテンツ
div, hr, ul, li, p
インライン
a, br, span, small
マルチメディア
img, video
埋め込みコンテンツ
iframe, picture, source
テーブル
table, thead, tbody, tfoot, col, tr, th, td
フォーム
form, button, label, input, textarea, select, option
タグの属性を理解する
グローバル属性
id, class, style, data-*, hidden,
タグ固有の属性
a タグに href があるように、固有の属性があることを知る。
勝手に覚えていくので無理して暗記する必要はない。
CSS
最低ライン
プロパティとそれぞれの取りうる値を知る
※ 取りうる値は必要になったものを自然と覚えていくので暗記する必要はない。
レイアウト
display, (max,min)width, (max,min)height, margin, padding, border, outline
フォント
font-weight, font-size, font-family
テキスト
line-height, text-align, vertical-align, text-decoration, white-space, letter-spacing word-break, text-shadow
文字色・背景
color, background-color, background-image, background-position, background-repeat, background-size, opacity
表示・配置
overflow, position, display, z-index, visibility
フレックス
flex, flex-direction, justify-content, align-items, align-self
特に重要で Flexbox でレイアウトを組み立てられるようになる必要がある
その他
box-sizing, list-style, cursor, object-fit, object-position
セレクタについて知る
基本
タイプセレクター(div, span など)
クラスセレクター(.classname)
ID セレクター(#idname)
ユニバーサルセレクター(*)
属性セレクター
[attr], [attr=value], [attr~=value], [attr|=value], [attr^=value], [attr$=value], [attr*=value]
部分文字列一致セレクター
擬似表記
擬似クラス
:hover, :not, :nth-child, :nth-of-type
擬似要素
::after, ::before
結合子
子孫結合子(A B)
子結合子(A > B)
隣接兄弟結合子(A + B)
一般兄弟結合子(A ~ B)
ボックスモデルの理解
width, height, padding, margin, border の理解
インライン・ブロック違いを知る
改行されるかどうか
width, height の挙動
padding, margin, border の挙動
box-sizing プロパティについて知る
なぜ全要素に border-box を適用させるのか
カスケード・詳細度・継承
カスケードとは何か概要を掴む
詳細度のスコアリングについて学ぶ
継承とはどういうものか学ぶ
!important をあまり使ってはいけない理由を知る
レスポンシブ
viewport を理解する
メディアクエリを理解する
メディアタイプとは何か学ぶ
メディア特性について学ぶ
モバイルファーストで書けるようにする
HTML・CSS 実践
最低ライン
Chrome DevTools の「Elements」タブを使えるようにする
要素を選択し、削除したり、コピーができる
「Styles」で CSS プロパティを変更しながら見た目の調整ができる
よくあるレイアウトを作れるようになる
聖杯レイアウト
サイドバーレイアウト
タブメニュー
ハンバーガー(ドロワー)メニュー
ボトムナビゲーション
モーダル(ポップアップ)
実際に書く
複数のサイトを参考に、実際にソックリな見た目を作れるようになる
デザイン重視の LP よりも、よく使われる Web アプリケーションを模倣する
アニメーションはそこまで使われていないサービスが良い
しっかりレスポンシブの見た目まで模倣できるようにする
JavaScript
最低ライン
ECMAScript について知る
ECMAScript は JavaScript の標準仕様
どの実行環境でも共通な動作を定義
JavaScript の「言語」を学ぶときは主に下記 3 つを学ぶことと同義
1. ECMAScript を学ぶ(基本構文)
2. ブラウザの環境下で使えるオブジェクトを学ぶ
3. Node.js の環境下で使えるオブジェクトを学ぶ(Node.js を学ぶのは後々で良い)
ECMAScript は毎年新機能が追加される
その年の新機能は ES + 年号で定義される。ES2021 など
当初は ES1, ES2, ...という命名だったが 2015 年から ES+年号になった
ES2015 で言語仕様がガラッと変わり、大きく進化した
基本構文
let, const(もう var を使うことはない)
文字列
テンプレートリテラル
文字列結合(+)
分解(split)
すべて覚える必要は無いが、length や split など色んなプロパティやメソッドがあることを知る(「どう 実現するんだろう」ってなって調べて覚える)
数値
演算子を使った計算ができるようにする(四則演算、++、--、大小比較など)
Math のメソッドで数値を操作できることを知る(数値を整数にするなど)
真偽値, undefined, null などのデータ型があることを知る
Falsy な値・Truty な値とは何かを知る
条件分岐で実行される条件、されない条件の書き方をある程度知る(&&, ||, !, <=, ===などの論理演算子 や比較演算子)
条件分岐
if, else, else if
switch, break
三項演算子を用いた条件分岐を学ぶ
配列
配列に追加したり、削除したり、アクセスするための方法を知る
色んな繰り返し処理がある
forEach, map, filter は絶対に使えるようにする
上記以外の例えば find, some, every などは必要になってから調べるでいい
他にもすべて覚える必要は無いが、length や slice, includes など色んなプロパティやメソッドがあるこ とを知る(「どう実現するんだろう」ってなって調べて覚える)
オブジェクト
作成方法や、キー、値などの基本を学ぶ
ドット記法とブラケット記法でアクセスできる
基本的にはドット記法、どうしても書けない場合はブラケット記法を使う
プロパティの追加や削除ができるようにする
配列とオブジェクト
配列とオブジェクト、それぞれの分割代入の書き方を学ぶ
React などでもよく使われる書き方のため
ミュータブル・イミュータブルとは何か知る
破壊的なメソッドはなるべく使わない
非破壊的なメソッドで実現するように心がける
例えば sort は破壊的なメソッドだが、スプレッド構文と組み合わせて非破壊的に使うことができる
スプレッド構文を使えるようにする
関数
基本的な使い方を学ぶ
関数宣言の書き方を学ぶ(function)
引数について学ぶ
デフォルト引数を使えるようにする
Rest parameters の使えるようにする
分割代入を使えるようにする
関数式の書き方を学ぶ
アロー関数の書き方を学ぶ
基本はアロー関数を使う
現場では関数宣言で書かれることも多いことだけ注意
コールバック関数について学ぶ
ブラウザの環境下で使えるオブジェクト
Window オブジェクト
すべて覚える必要は無いが、console や alert, localStrage など色んなプロパティやメソッドがあること を知る(必要になってから調べて覚えるで OK)
DOM
DOM とは何かを知る
HTML と似ているけど違う
HTML のコンテンツを JavaScript から操作できるオブジェクト
HTML 要素を取得したり、新しく HTML 要素を作成するメソッドがある
すべて覚える必要は無いが、location や querySelector, createElement など色んなプロパティやメソッ ドがあることを知る(必要になってから調べて覚えるで OK)
イベントを設定できる
click 時、ローディング時など色んなタイミングでイベントを起動させられる
addEventListner の使い方を知る(コールバック関数について把握している必要あり)
非同期処理
fetch も Window オブジェクトのメソッドの 1 つ
同期処理・非同期処理について知る
どういうときに使うのか
普通に書いたらすべて同期処理
非同期処理は実現方法がいくつかあるが、今は async await を用いるのが一般的。
サーバーからデータ取得をする API
API という言葉は幅広く、色んなものがある
その中でもサーバーからデータ取得をするための API について学んでほしい
基本は API を叩いて(API 経由でデータを取得して)、そのデータをブラウザで表示する
ザックリだが、バックエンドの仕事は API をつくること
フロントエンドの仕事は API を叩いてユーザーに見せること
実際に API を叩いてみよう
最初から自分で API を作るのは難しいのでオープンに公開されている API を叩く
API を叩いて、そこから得られたデータを DOM を操作して、画面に表示できるようにする
HTML・CSS・JavaScript を通しての所感
HTML・CSS・JavaScript はここらへんまで理解できたら OK だと考えている。あとは実践で必要になってググり ながら学ぶので間に合う。
よく HTML や CSS の細かいところまで覚えたり、JavaScript だと DOM の色んなメソッドを覚える人がいるが 、現代のフロントエンド開発において素の HTML や CSS、JavaScript を使うことは少なくなっているため、正 直そういった細かい知識は使われないことが多い。
例えば React だと HTML の代わりに JSX という記法で表現したり、CSS は CSS フレームワークや CSS in JS などで管理する。また React や Vue、Angular には仮想 DOM という概念があり、開発者は基本的に仮想 DOM を触り、ブラウザが標準で用意している DOM を扱うことはほとんど無い。appendChild とか textContent とか 全くと言っていいほど使わない。
大事なのは概念理解、HTML や CSS、JavaScript で何ができるのか、なぜ必要なのかを理解することである 。JavaScript は色々できるが、基本的な仕事は「データのやり取りをすること」「(仮想)DOM を扱うこと」 の 2 つと思っていただいて良い。基本構文・ブラウザの環境下で使えるオブジェクト・非同期処理さえ、概ね の理解できたらサッサと次に進もう。
また jQuery や Bootstrap は学ぶ必要ないです。現場で使われてたらそのときに覚えるで OK です。
モジュール
概要
今まで JavaScript の名前空間は Window の 1 つしかありませんでした。名前空間が 1 つのせいで、変数名や 関数名が被ったり、依存のあるコードが多くなって管理できずにバグを生み出していました。それを解決するの がモジュールという概念です。フロントエンド開発をするときにモジュールが無いのはありえない・・・ってぐ らい重要です。
最低ライン
モジュールとは何か知る
JavaScript におけるモジュールはファイル単位
1 ファイル 1 モジュール
モジュールがあると何が嬉しいのか
名前空間問題が解決される(Window 1 つからファイル単位へ)
再利用性が高まる
ファイル単位で管理できるので保守性が高い
現在はモジュールには大きく 2 種類ある
1. ES Modules (ESM) 形式
ECMAScript 標準なので、今後こちらが主流になる
フロントエンド開発を行うときも基本はこっち
この書き方はマスターする必要あり
2. CommonJS (CJS) 形式
Node.js で使われてきた方式
だんだん ESM 形式に変わっていくと見られている
必要になったタイミングで覚える
ESM 形式の書き方
Named Import
基本はこっちを使う
Default Import
All Import, Re-export, Side Effect を学ぶ
CLI(コマンドラインインターフェース)
概要
CUI とも言います。エンジニアになるためにはコマンドライン操作は欠かせません。人間がポチポチやるより機 械に任せたほうが良い操作はたくさんあります。また後述の npm でも必要になってくるので最低限は覚えまし ょう。
最低ライン
シェルとは何かを知る
(人間の)命令をコンピュータに伝えるプログラム
bash, zsh, fish が有名
bash がデフォルトだけど zsh か fish が多い印象
fish はカスタマイズしなくても良い感じに色んな機能があるのでオススメ(私も使ってます)
PC のディレクトリ構成を知る
OS によっても違いがある
root ディレクトリとは何か知る
home ディレクトリとは何か知る
絶対パスと相対パスを知る
基本的なコマンドに慣れる
pwd(パス確認)
cd(移動)
ls(ディレクトリ内の階層を一覧表示)
touch(空のファイルを新規作成やタイムスタンプの操作など)
cp(ファイルやディレクトリのコピー)
mv(ファイルやディレクトリの移動)
rm(ファイルやディレクトリの削除)
mkdir(ディレクトリの新規作成)
rmdir(ディレクトリの削除)
cat(ファイルの内容の確認など)
コマンドはオプションと一緒に使うことも多い
rm -r とすると今いる階層だけでなく下の階層まで処理する
オプションは必要になったタイミングでググって覚えるで OK
コマンドは他にもたくさんあるが、必要に迫られたり、余力があるときに知識を蓄える必要あり
npm を学ぶ上ではいったん上記コマンドさえ分かれば問題なさそう
npm
概要
コードを公開したり共有するときにパッケージ管理システム(npm or yarn)が使われます。今のフロントエン ドでは自分で機能をイチから作るよりも第三者が公開しているパッケージを利用して作ることの方が多いです。
例えば画像のスライダーも自分で自作するより、既にあるパッケージを利用して実装します(もちろん自作でき るぐらいのプログラミングスキルがある方が望ましいですね)。
パッケージを利用するために npm が必要なのでぜひマスターしましょう。
最低ライン
npm と yarn について
どちらもパッケージ管理システム
yarn が後出で基本的には npm と互換性がある
ただしいくつかの点で yarn 推し
yarn upgrade-interactive という npm には無い便利コマンドがある
純粋に yarn の方がパフォーマンスが良い
yarn の方がセキュアらしいですが、内容までは詳しく知りません
monorepo という技術があるのですが、それを使うときに yarn の方が便利(今は無視で OK です)
npm, yarn のインストール方法
npm や yarn は Node.js を用いて動かしているので、Node.js 自体をまずは入れる必要がある。
Node.js は Node.js バージョン管理ツールで基本的にインストールする
NVM, n などが有名だが、最近出た VOLTA が個人的にオススメです
セットアップが楽
めちゃくちゃ高速
クロスプラットフォーム(Windows でも動く)
プロジェクトごとのバージョン管理が楽
VOLTA を入れたら、Node.js と一緒に npm もインストールされる
あとは npm install -g yarn で yarn もインストールできる
基本的な使い方を学ぶ
package.json と CLI で管理する手法を学ぶ
パッケージのインストール方法や削除方法
npm i <パッケージ名>または yarn add <パッケージ名>
npm remove <パッケージ名>または yarn remove <パッケージ名>
package.json や package-lock.json(yarn だと yarn.lock)の見方を学ぶ
バージョンをアップさせるにはどうしたら良いか
セマンティックバージョニングを使ったバージョン指定に関するルールを知る
グローバルインストールとローカルインストールについて知る
なぜグローバルよりローカルインストールが好まれるのか
インストールしたパッケージの使い方を知る
node_modules 経由で読み込む
npm scripts でコマンドを使えるようにする
npx について
npx が npm や yarn とどう違うのか知る
Babel
概要
ある構文の JavaScript を、別の構文の JavaScript に変換するツール。ES2015(当時は ES6 と呼ばれていた ) が出たときに非常に便利な構文がたくさん出たのに、ブラウザの互換性がなかったため、便利な構文を使え なかった。ES6 を旧ブラウザで動くバージョン(ES5)に変換するのを目的として誕生した。そのため最初の名 前は Babel ではなく 6to5 という名前だった。
そこから転じて、最新の便利な構文を色んなブラウザで動くように変換するだけではなく、通常だったらブラウ ザ上で動かないものも動くように変換するためにも使われるようになった。例えば React では JSX という HTML に似た記法でコードを書いていくが、これはブラウザ上では動かすことができない。その JSX をブラウザ で動かすためにも用いられる。また最近では TypeScript も Babel を通じて他の変換作業と一緒に JavaScript に変換することが多い。
React や TypeScript を学んでいく上では概念理解は避けては通れないが、正直一から自分で書く必要は無い。 というのも Next.js や Create React App でプロジェクトを作る場合が多く、そのときは Babel は隠蔽されて て開発者が意識することはほとんど無いからだ。ただしプロジェクトによっては Babel の設定ファイルを自分 で書いたりする必要があるので、急に名前を見ても驚かないようにするために概念だけは抑えておこう。
最低ライン
Babel とは何かを学ぶ
上記説明だけで理解できない場合は公式を見たり、ググったりしながら理解を深める
Babel で一度ある JavaScript を、別の JavaScript に変換して感覚を掴んでもらう
※ Babel は概念理解が重要なのでそれだけで OK です。
webpack
概要
従来 JavaScript にモジュールという機能はなく、Node.js が誕生した際にモジュールの概念が生まれた 。Node.js はドンドン進化してモジュールを活用した便利なパッケージが生まれたが、Node.js とブラウザの JavaScript の環境は違うため、Node.js のパッケージをそのままブラウザで使用することができなかった。そ れをできるようにしているのが webpack。
それが歴史ではあるが、今となっては Node.js のパッケージを使えるようにするだけではなく、色んなものを 一緒に変換したり、変換時に便利な機能を追加できるようになった。例えばスタイルシートや画像ファイルも JavaScript 上で扱いやすくするために変換できるし、変換と同時に Tree Shaking(不要なコードの削除)や minify(圧縮)を行ってサイズを減らすことができる。
また webpack のローカル開発環境を立ち上げ+ホットリロードという機能を用いることで、「コードを書く → 手動で変換 → 確認」という流れから「コードを書く → 自動変換 → 確認」という流れになり、開発が非常に容 易になった。
他にも依存関係の解決を行ってくれる。開発者が依存関係を把握しながらコードを書くことは現実的ではないの で、webpack を用いて自動的に解決を行う。
・・・という感じで webpack は正直あまりにもできることが多い。概念理解が最も難しく、一気にすべてを理 解することは不可能(私もすべて知っているわけではない)なので、最低限必要な部分を覚える必要がある。
こちらも Babel と同じく Next.js や Create React App の存在で設定ファイルを自分で一から記述することは 少なくなった。ただしプロジェクトによっては一から設定ファイルを書いているところもあるので、ある程度は 概念理解をし、必要になったタイミングですぐにググって設定ファイルを書けるようにする必要がある。
最低ライン
webpack が必要な理由を知る
CJS 形式やその他のブラウザで動かないパッケージをブラウザで実行可能にする
パッケージ同士の依存関係を自動解決してくれる
画像・フォント・スタイルシートなどを JavaScript で扱えるようにする
Tree Shaking(不要なコードの削除)や minify でサイズ圧縮ができる
ローカルサーバーを立ち上げ開発環境を作ることができる
Babel などと一緒に用いて、最新の ES や TypeScript なども変換できる
その他、変換時に何かしたければ何でもできる
かんたんな例で、webpack を実際に自分の手元で試してみて感覚を掴む
webpack も概念理解が重要なので一旦それだけで OK です。
ESLint
概要
最低ライン
Prettier
概要
最低ライン
React
概要
最低ライン
Next.js
概要
最低ライン
TypeScript
概要
最低ライン